import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import {LanWrapper} from './styled.js'
import {Form, Input, Switch, Select, Button, Icon, InputNumber} from 'antd'
import {actionFunc} from './store'
import SubmitBtn from '@/components/SubmitBtn'
import {FormattedMessage} from 'react-intl'


class LanSet extends PureComponent {
    render() {
        const {formData} = this.props
        const FormItem = Form.Item;
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
        };
        return (
            <LanWrapper>
                <Form onSubmit={this.props.handleSubmit.bind(this)}>
                    <FormItem
                        {...formItemLayout}
                        label={<FormattedMessage id='ipAddress'/>}
                    >
                        {getFieldDecorator('ipAddress', {
                            initialValue: `${formData.get('ipAddress')||''}`,
                            rules: [{
                                required: true,
                                message: 'Please select a type',
                            },
                                {whitespace: true, message: 'White Space is not allowed',}
                            ],
                        })(
                            <Input className='input-style'/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={<FormattedMessage id='mask'/>}
                    >
                        {getFieldDecorator('subnetMask', {
                            initialValue: `${formData.get('subnetMask')||''}`,
                            rules: [{
                                required: true,
                                message: 'Please select a type',
                            },
                                {whitespace: true, message: 'White Space is not allowed',}
                            ],
                        })(
                            <Input className='input-style'/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={<FormattedMessage id='macAddress'/>}
                    >
                        {getFieldDecorator('macAddress', {
                            initialValue: `${formData.get('macAddress')||''}`,
                            rules: [{
                                required: true,
                                message: 'Please select a type',
                            },
                                {whitespace: true, message: 'White Space is not allowed',}
                            ],
                        })(
                            <Input className='input-style'/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="MTU"
                    >
                        {getFieldDecorator('MTU', {
                            initialValue: `${formData.get('MTU')||''}`,
                            rules: [{
                                required: true, message: 'Please select a type',
                            }],
                        })(
                            <InputNumber min={576} max={1500} className='input-style'/>
                        )}
                        <span className="ant-form-text">(576-1500)</span>
                    </FormItem>
                    <FormItem wrapperCol={{span:12,offset:6}}>
                        {/*<Button type='primary' htmlType='submit'>Submit</Button>*/}
                        <SubmitBtn></SubmitBtn>
                    </FormItem>
                </Form>
            </LanWrapper>
        )
    }


    componentDidMount() {
        this.props.requestList()
    }
}

const mapState = (state) => ({
    formData: state.getIn(['lan','formData'])
})
const mapDispatch = (dispatch) => ({
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err,values)=>{
            if(!err){
                console.log(values)
                dispatch(actionFunc.setLanSetData(values))
            }
        })
    },
    requestList() {
        dispatch(actionFunc.getLanSetData())
    }
})


export default connect(mapState, mapDispatch)(Form.create()(LanSet))
